<h1>Adicionar produto</h1>
<?php
echo $this->Form->create('Produto') ;
echo $this->Form->input('nome', array("class"=>"form-control", 'div' => array('class'=>'form-group')));
echo $this->Form->input('tipo_id', array("class"=>"form-control", 'div' => array('class'=>'form-group')));
echo $this->Form->input('fornecedor_id', array("class"=>"form-control", 'div' => array('class'=>'form-group')));
echo $this->Form->input('Cor', array('multiple' => 'multiple', 'id' => 'cores',
    'type' => 'select',"class"=>"form-control", 'div' => array('class'=>'form-group')));
echo '<button type="button" class="btn btn-default" onclick="adicionaCor()">Adicionar Nova Cor</button>';
echo $this->Form->input('Tamanho', array('multiple' => 'multiple', 'id' => 'tamanhos',
    'type' => 'select',"class"=>"form-control", 'div' => array('class'=>'form-group')));
echo '<button type="button" class="btn btn-default" onclick="adicionaTamanho()">Adicionar Novo Tamanho</button>';
echo $this->Form->input('qtd_estoque', array('label' => 'Quantidade em estoque', "class"=>"form-control", 'div' => array('class'=>'form-group')));
echo $this->Form->input('cd_interno', array('label' => 'Código interno', "class"=>"form-control", 'div' => array('class'=>'form-group')));
echo $this->Form->input('preco', array('label' => 'Preço', "class"=>"form-control", 'div' => array('class'=>'form-group')));
echo $this->Form->input('peso', array('label' => 'Peso (em Gramas)', "type"=> "number", "class"=>"form-control", 'div' => array('class'=>'form-group')));
echo $this->Form->input('ds_produto', array('rows' => '3', 'label' => 'Descrição', "class"=>"form-control", 'div' => array('class'=>'form-group')));
echo $this->Form->submit('Salvar produto', array('class' => 'btn btn-default'));
echo $this->Form->end() ;
?>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">
		  <div class="form-group">
			<label for="valor">Nome</label>
			<input type="text" class="form-control" id="valor"/>
		  </div>
	  </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" id="salvar" onclick="request()">Salvar</button>
      </div>
    </div>
  </div>
</div>
<script>
	function request(){
		var nome = $("#valor").val(),
			button = document.querySelector("#salvar"),
			url = button.dataset.url,
			id = button.dataset.id;

		$.post(url, {nome: nome}).done(function( data ) {
			$(id).append(data);
			  
			$('#myModal').modal('hide');
			$("#valor").val("");
		});
	}

	function adicionaCor(){
		var button = document.querySelector("#salvar");
		button.dataset.url = "adicionaCor";
		button.dataset.id = "#cores";
		document.querySelector("#myModalLabel").innerHTML = "Nova Cor";
		
		$('#myModal').modal('show');
	}
	
	function adicionaTamanho(){
		var button = document.querySelector("#salvar");
		button.dataset.url = "adicionaTamanho";
		button.dataset.id = "#tamanhos";
		document.querySelector("#myModalLabel").innerHTML = "Novo Tamanho";
		
		$('#myModal').modal('show');
	}
</script>